<!DOCTYPE html> 
<html lang="zh" > 
<head> 
<title>Bootstrap 101 Template</title> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="css/mystyle.css">

</head> 
<body> 

 <div class="pull-left">我在最左边</div>
 <div class="pull-right">我在最右边</div>
<div class="container">
    <ul class="nav nav-pills" >
        <li  data-toggle='mynav'><a href="#">Home</a></li>
        <li data-toggle='mynav'><a href="#" >Help</a></li>
        <li class="dropdown" data-toggle='mynav'>
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
   
    <h1>Hello, world!</h1>
    <a href="" class="btn btn-info">我是按钮</a> 
    <button type="button" class="btn btn-default">Default</button>
    
    <p>1.网格布局</p>
    <div class="row show-grid">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
     <div class="row show-grid">
        <div >.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-m7-1">.col-md-7</div>
       
    </div>
    
    <p>2.响应式表格</p>
    <div class="table-responsive">
        <table class="table  ">
                <tr class="active"><td  colspan="4">111</td></tr>
            <tr class="success"><td colspan="5" >111</td></tr>
            <tr class="warning"><td colspan="3">111</td></tr>
            <tr class="danger"><td colspan="8">111</td></tr>
            
            <!-- On cells (`td` or `th`) -->
            <tr>
              <td class="active">aaaaaa</td>
              <td class="success">bbbbb</td>
              <td class="warning">cccc</td>
              <td class="danger">ddddd</td>
              <td class="danger">eeeeee</td>
            </tr>
        
        </table>
    </div>
    
    <p>3.表单</p>
    
    <form action="" class="form-horizontal" >
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
            <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        
    </form>
    
    
    <p>4.按钮</p>
    
            <!-- Standard button -->
        <button type="button" class="btn btn-default">默认</button>
        
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">主要</button>
        
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">成功</button>
        
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">信息</button>
        
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">警告</button>
        
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">危险</button>
        
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">链接</button>
    
    
    <p>5.下拉菜单</p>
    
<!--
    <div class="dropdown clearfix  ">
        <button class="btn dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>
-->
      
      
              <div class="btn-group">
          <button type="button" class="btn btn-default">1</button>
          <button type="button" class="btn btn-default">2</button>
        
          <div class="btn-group" id="ta333">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-target="#ta333">
              Dropdown
              <span class="caret"></span>
            </button>
           
             <ul class="dropdown-menu" >
              <li><a href="#">Dropdown link222</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
            <ul class="dropdown-menu" > 
              <li><a href="#">Dropdown link2322</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
          </div>
           
        </div>
</div>
<div class="well">look</div>
<p>6.按钮组</p>

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>


<div class="jumbotron">

      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>

</div>

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>


<ul class="nav nav-tabs" id="myTab">
  <li class="active"  onclick="aa()"><a href="#home" onclick="aa();" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">..1.</div>
  <div class="tab-pane" id="profile">..2.</div>
  <div class="tab-pane" id="messages">.3..</div>
  <div class="tab-pane" id="settings">.4..</div>
</div>




<script src="js/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 


<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
  
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
//  alert('aa');
  e.target // activated tab
  e.relatedTarget // previous tab
  
})


    jQuery(document).ready(function($){
        var url = window.location.href;
        $('.nav a[href="'+url+'"]').parent().addClass('active');
    });





</script>
</body> 
</html>

